<template>
	<view class="playMusicBar" v-show="currentMusicId != '' && currentMusicId != undefined">
		<view :class="isPlayingMusic ? 'musicCover running' : 'musicCover paused'" @click="toMusicDetail">
			<image :src="currentMusicDetail.al.picUrl" mode="widthFix"></image>
		</view>
		<view class="musicInfo" @click="toMusicDetail">
			<text>{{currentMusicDetail.name}}</text>
			<text>-{{currentMusicDetail.ar[0].name}}</text>
		</view>
		<view class="playBtn" @click.stop="playMusic">
			<image :src="isPlayingMusic ? '/static/images/bar-pause.png' : '/static/images/bar-play.png'" mode="widthFix"></image>
			<!-- <view class="circle"></view> -->
		</view>
		<view class="playListBtn" @click.stop="showPlayList">
			<image src="../static/images/playList.png" mode="widthFix"></image>
		</view>

		<u-popup class="playListPopup" v-model="playListPopup" mode="bottom" border-radius="30" z-index="9999999999" height="60%"
		 :custom-style="popStyle">
			<view class="popupHeader">
				<view class="title">
					<text style="font-size: 32rpx;font-weight: bolder;">播放列表</text>
					<text style="font-size: 24rpx;color: #666;">({{currentPlayList.length ? currentPlayList.length : 0}})</text>
				</view>
				<view class="playMode" @click="changeMode">
					<image :src="getPlayMode(playMode).icon" mode="widthFix"></image>
					<text>{{getPlayMode(playMode).name}}</text>
				</view>
			</view>

			<view style="padding: -20rpx 0 20rpx;">
				<view class="playList" v-for="(item,index) in currentPlayList" :key="index" @click="changeMusic(item.id)">
					<view :class="currentMusicId == item.id ? 'songInfo playing' : 'songInfo'">
						<image v-show="currentMusicId == item.id" src="/static/images/play-red.png" mode="widthFix"></image>
						<text>{{item.name}}</text>
						<text :style="{ color: currentMusicId == item.id ? '#fe5756' : '#666' }">-{{item.ar[0].name || item.artists[0].name}}</text>
					</view>
					<view class="del" @click.stop="delPlayListSong(index)">
						<image src="/static/images/x.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 50rpx;"></view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getSongDetail,
		getMusicCover,
		getSongLyric
	} from '@/api/music.js'
	export default {
		data() {
			return {
				playListPopup: false,
				popStyle: {
					width: '690rpx',
					marginLeft: '30rpx',
					marginBottom: '40rpx',
					borderRadius: '25rpx'
				},
				playModeList: [{
						mode: 'loop',
						name: '列表循环',
						icon: '/static/images/loop.png'
					},
					{
						mode: 'singleLoop',
						name: '单曲循环',
						icon: '/static/images/singleLoop.png'
					},
					{
						mode: 'random',
						name: '随机播放',
						icon: '/static/images/random.png'
					}
				]
			};
		},
		watch: {
			// 监听vux中的musicId,若变化则通知音乐组件切歌
			currentMusicId(e) {
				this.getSongDetail()
				this.changeMusicPlayStatus(true)
				this.$playMusic.changeMusic(e)
			}
		},
		computed: {
			...mapState(['currentMusicId', 'isPlayingMusic', 'currentMusicDetail', 'playMode', 'currentPlayList'])
		},
		mounted() {
			console.log(this.currentMusicId)
		},
		methods: {
			...mapMutations(['changeMusicPlayStatus', 'changeCurrentMusicId', 'changeCurrentMusicDetail', 'changePlayMode',
				'changePlayList', 'changeLyric'
			]),
			// 播放/暂停音乐
			playMusic() {
				this.changeMusicPlayStatus()
				this.$playMusic.changeMusic()
			},
			// 获取歌曲详情
			getSongDetail() {
				const that = this
				getSongDetail(that.currentMusicId).then(res => {
					let songDetail = res.data.songs[0]
					that.changeCurrentMusicDetail(songDetail)
					// getMusicCover(res.data.songs[0].al.id).then(res2 => {
					// 	songDetail.coverImg = res2
					// 	that.changeCurrentMusicDetail(songDetail)
					// })
				})
				getSongLyric(that.currentMusicId).then(res3 => {
					let lyric = res3.data.lrc.lyric
					let reg = /\n/
					let newLyric = lyric.split(reg)
					this.changeLyric(newLyric)
				})
			},
			// 跳转歌曲详情
			toMusicDetail() {
				uni.navigateTo({
					url: `/pages/music/singleSong/songDetail`,
					animationType: 'slide-in-bottom',
					fail(err) {
						console.log(err)
					}
				})
			},
			// 显示播放列表
			showPlayList() {
				this.playListPopup = true
			},
			// 获取当前播放模式信息
			getPlayMode(mode) {
				let detail = this.playModeList.find(item => item.mode == mode)
				return detail
			},
			// 切换播放模式
			changeMode() {
				switch (this.playMode) {
					case 'loop':
						this.changePlayMode('random')
						break;
					case 'random':
						this.changePlayMode('singleLoop')
						break;
					case 'singleLoop':
						this.changePlayMode('loop')
						break;
				}
			},
			// 点击播放列表切歌
			changeMusic(id) {
				this.changeCurrentMusicId(id)
			},
			// 删除播放列表内歌曲
			delPlayListSong(index) {
				this.currentPlayList.splice(index, 1)
				this.changePlayList(this.currentPlayList)
			}
		}
	}
</script>

<style lang="scss">
	.playMusicBar {
		position: fixed;
		display: flex;
		align-items: center;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		padding: 0 20rpx 0 30rpx;
		border-top: 1rpx solid #eee;
		background-color: rgba(255, 255, 255, .97);

		.musicCover {
			width: 100rpx;
			max-width: 100rpx;
			height: 100rpx;
			max-height: 100rpx;
			border-radius: 50rpx;
			transition: 10s;
			animation: rotate 8s linear infinite;

			image {
				width: 100rpx;
				max-width: 100rpx;
				height: 100rpx;
				max-height: 100rpx;
				border-radius: 50rpx;
			}
		}

		.musicInfo {
			padding-left: 20rpx;
			width: 460rpx;
			height: 80rpx;
			line-height: 80rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			text {
				&:last-child {
					margin-left: 8rpx;
					font-size: 26rpx;
					color: #666;
				}
			}
		}

		.playBtn {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60rpx;
			height: 60rpx;
			margin-right: 30rpx;
			border: 1px solid #ccc;
			border-radius: 30rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.circle {
				position: absolute;
				width: 100%;
				height: 50%;
				border-radius: 50%;
				border: 1px solid #000;
			}
		}

		.playListBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60rpx;
			height: 60rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.playListPopup {
		.popupHeader {
			position: fixed;
			padding: 30rpx 20rpx 0;
			top: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 690rpx;
			height: 100rpx;
			background-color: #fff;
			z-index: 12;

			.title {
				display: flex;
				align-items: center;
			}

			.playMode {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
				}

				text {
					margin-left: 14rpx;
					font-size: 26rpx;
				}
			}
		}

		.playList {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 650rpx;
			height: 80rpx;
			background-color: #fff;
			&:first-child {
				margin-top: 50rpx;
			}

			.songInfo {
				width: 610rpx;
				height: 80rpx;
				line-height: 80rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				text {
					&:last-child {
						margin-left: 8rpx;
						font-size: 26rpx;
					}
				}

				image {
					width: 25rpx;
					margin-right: 10rpx;
				}
			}

			.del {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40rpx;
				height: 80rpx;
				z-index: 1;

				image {
					width: 30rpx;
				}
			}
		}

		.playing {
			color: #fe5756 !important;
		}

		/deep/ scroll-view {
			padding: 26rpx 20rpx !important;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}

	.running {
		animation-play-state: running !important;
	}

	.paused {
		animation-play-state: paused !important;
	}
</style>
